body{
    margin: 0;
    overflow: hidden;
}
*{
    box-sizing: border-box;
}

.page-enter,.page-leave-to{
    transform: translate(0,-100%);
}
.page-enter-active,.page-leave-active{
    transition: all 0.7s;
}
.page-enter-to,.page-leave{
   transform: translate(0,0);
}

/*蒙灰层*/

.pagein-enter,.pagein-leave-to{
    opacity: 0;
}
.pagein-enter-active,.pagein-leave-active{
    transition: all 0.7s;
}
.pagein-enter-to,.pagein-leave{
   opacity: 1;
}

/*侧边栏*/
.in-enter,.in-leave-to{
    transform: translate(-100%,0);
}
.in-enter-active,.in-leave-active{
    transition: all 0.7s;
}
.in-enter-to,.in-leave{
   transform: translate(0,0);
}

/*条件选择下面的div*/
.select-enter,.select-leave-to{
    height: 0px;
}
.select-enter-active,.select-leave-active{
    transition: all 0.7s;
}

.select-enter-to,.select-leave{
    height: 263px;
}


/*页面之间动画*/
.inpage-enter{
    transform: translate(100%,0);
}
.inpage-enter-active,.inpage-leave-active{
    transition: all 0.7s;
    position: absolute;
    width: 100%;
}
.inpage-enter-to{
    transform: translate(0,0);
}
.inpage-leave{
    transform: translate(0,0);
}
.inpage-leave-to{
    transform: translate(-30%,0);
}

/*---------------*/
.outpage-enter{
    transform: translate(-30%,0);
}
.outpage-enter-active,.outpage-leave-active{
    transition: all 0.7s;
    position: absolute;
    width: 100%;
}
.outpage-enter-to{
    transform: translate(0,0);
}
.outpage-leave{
    transform: translate(0,0);
}
.outpage-leave-to{
    transform: translate(100%,0);
}